<template>
  <div class="container">
    <h1>配置数据和图表</h1>
    <div class="body">
      <div class="column">
        <a-form :form="form">
          <a-form-item :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol" label="选择索引">
            <a-select default-value="lucy" >
              <a-select-option value="jack">
                Jack
              </a-select-option>
              <a-select-option value="lucy">
                Lucy
              </a-select-option>
              <a-select-option value="Yiminghe">
                yiminghe
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
            <a-button type="primary"> 查询 </a-button>
          </a-form-item>
        </a-form>
        <hr>
        <div>
          数据预览
          <table></table>
        </div>
      </div>
      <div class="column"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConfigData',
  data () {
    return {
      formItemLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 12 }
      },
      formTailLayout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 12, offset: 4 }
      },
      form: this.$form.createForm(this)
    }
  },
  created () {},
  mounted () {
    console.log('xxxx')
    this.$bus.on('selectedChart', (data) => {
      console.log(data)
    })
  },
  beforeDestroy () {
    // 销毁监听事件，防止多次触发
    this.$bus.$off('selectedChart')
  },
  methods: {}
}
</script>

<style lang="less" scoped>
.container {
  > h1 {
    margin-top: 20px;
    font-size: 24px;
    line-height: 33px;
    margin-bottom: 16px;
    font-weight: 400;
    color: rgba(0, 0, 0, 0.65);
  }
  .body {
    display: flex;
    justify-content: space-between;
    .column {
      width: 50%;
    }
  }
}
</style>
